<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="basePath" scope="request" value="<%=request.getContextPath()%>"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="renderer" content="webkit" />
    <!-- forbiden transcode -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="keyword" content="key words" />
    <meta name="description" content="description words" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telphone=no, email=no" />
    <title>活动报名</title>
    <link rel="shortcut icon" type="image/x-icon" href="/pages/mobile/assets/css/img/favicon.ico" />
    <link rel="stylesheet" href="/pages/mobile/amazeUI/css/amazeui.css" />
    <link rel="stylesheet" href="/pages/mobile/assets/css/mine.css" />
</head>
<body class="bg-color">
    <div class="banner" id="banner">
        <img src="/pages/mobile/assets/images/sign-up.jpg" alt="图片" class="am-img-responsive am-radius" />
    </div>
    <div class="container" id="container">
        <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
            <ul class="am-tabs-nav am-cf">
                <li class="am-active">
                    <a href="[data-tab-panel-0]">介绍</a>
                </li>
                <li class="">
                    <a href="[data-tab-panel-1]" action="#">报名</a>
                </li>
            </ul>
            <div class="am-tabs-bd">
                <div data-tab-panel-0 class="am-tab-panel am-active">
                    <div class="desc" id="introduce">
                        
                    </div>
                    <a href="javascript:;" action="sign-up" class="am-btn">立即报名</a>
                </div>
                <div data-tab-panel-1 class="am-tab-panel">
                    <div class="juge-sign" id="no-sign">
                        <div class="no-signUp fn-hide">
                            
                        </div>
                    </div>
                    <div class="juge-sign" id="is-sign">
                        <div class="is-signUp" id="is-signUp">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mask" action="mask">
        <div class="popup">
            <div class="title am-cf">
                <i></i>
                <h2>报名信息</h2>
                <i></i>
            </div>
            <div class="sign-info">
                <p>姓名<span>张三</span></p>
                <p>手机<span>110</span></p>
                <p>车牌<span>120</span></p>
                <p>留言<span>119</span></p>
            </div>
            <div class="pay">
                <a href="javascript:;" action="pay" data-pay="10" class="am-btn">前往支付</a>
                <a href="javascript:;" action="cancel" class="am-btn cancel">取消</a>
            </div>
        </div>
    </div>

    <script src="/pages/mobile/assets/js/global.js"></script>
    <script src="/pages/mobile/amazeUI/js/amazeui.js"></script>
    
    <script type="text/html" id="template/banner">
        <img src="/Manager/web/resource/download?resourceId={{action.thumb}}" alt="图片" class="am-img-responsive am-radius" />
    </script>
    
    <script type="text/html" id="template/noSign">
        {{if applyStatus != 0}}
        <div class="no-signUp fn-hide">
        {{else}}
        <div class="no-signUp">
        {{/if}}
            <div class="statement">
                <p>报名时间<span>{{action.applyStartTime | dataFormat:action.applyStartTime}}——{{action.applyEndTime | dataFormat:action.applyEndTime}}</span></p>
                {{if action.isNeedPay==1}}
                <p>费用名称<span>{{action.payname}}</span></p>
                <p>费用金额<span>{{action.pay}}</span></p>
                <p>截至日期<span>{{action.applyEndTime | dataFormat:action.applyEndTime}}</span></p>
                {{/if}}
            </div>
            <form class="am-form" action="/Manager/web/apply/createSave" method="Post">
                <div class="am-form-group">
                    {{each headlist as item}}
                    <input type="text" class="commit" name="{{item.id}}" data-necessary="{{item.isNeeded}}" data-label="{{item.title}}" placeholder="请输入{{item.title}}" value="" />
                    {{/each}}
                    <button type="submit" action="commit" class="am-btn">提交</button>
                </div>
            </form>
        </div>
    </script>

    <script type="text/html" id="template/isSign">
        <div class="client-info desc">
            {{each headlist as list index}}
            <p>{{list.title}}<span>{{applyval['item0' + index]}}</span></p>
            {{/each}}
        </div>
        {{if applyStatus == 1}}
        {{if action.isNeedPay == 1}}
        <button type="submit" action="commit" class="am-btn">前往支付</button>
        {{else if action.isNeedPay == 0}}
        <button type="submit" action="commit" class="am-btn">已报名成功</button>
        {{/if}}
        {{else if applyStatus == 2}}
        <button type="submit" action="commit" class="am-btn" disabled>已报名成功</button>
        {{/if}}
    </script>

    <script type="text/html" id="template/mask">
        
        <div class="popup">
            <div class="title am-cf">
                <i></i>
                <h2>报名信息</h2>
                <i></i>
            </div>
            <div class="sign-info">
                {{each headlist as list index}}
                <p>{{list.title}}<span>{{applyval['item0' + index]}}</span></p>
                {{/each}}
            </div>
            <div class="pay">
                <a href="javascript:;" action="pay" data-pay="{{orderval | PayInfoFormat:orderval}}" class="am-btn">前往支付</a>
                <a href="javascript:;" action="cancel" class="am-btn cancel">取消</a>
            </div>
        </div>
    </script>

    <script type="text/javascript">

        var App = {

            judgeLogin : function(){

                if(typeof appJs == "object"){

                    if(appJs.getUID()) appJs.login();                    
                }
                else if(window.iOSBridge){
                    iOSBridge.callHandler('appJsLogin', {}, function(response){
                        var uid = response;
                        if(uid) iOSBridge.callHandler('appJsLogin',{});
                    });
                    
                }
                else{
                    Toast.show('The network error, please refresh!');
                }
            },

            fuck : null,

            getData : function(){                
                $.get("/Manager/web/apply/createInit"+location.search,function(result){
                    if(result) App.fuck = result;
                    App.bindEvent();
                    App.renderBanner();
                    App.renderPage();
                })
                .fail(function(){
                    Toast.show("The network error, please refresh!");
                });
            },

            renderPage : function(){

                var fuck = App.fuck;
                $('#introduce').html(fuck.action.intro);

                if(fuck.applyStatus == 0){

                    var noSignHtml = template('template/noSign', fuck);
                    $('#no-sign').html(noSignHtml);

                    
                }else{

                    $("#signUp-btn").text('报名详情')
                    var isSignHtml = template('template/isSign', fuck);
                    $('#is-sign').html(isSignHtml);

                    var maskHtml = template('template/mask', fuck);
                    $("[action='mask']").html(maskHtml);
                }
                
            },

            renderBanner : function(){
                var fuck = App.fuck;
                var bannerHtml = template('template/banner', fuck);
                $('#banner').html(bannerHtml);
            },

            pay:function(data){

                if(typeof appJs=="object") {
                    appJs.pay(data);
                }
                else if(window.iOSBridge){
                    iOSBridge.callHandler("appJsPay",data);
                }
                else{
                    Toast.show("The network error, please refresh!",500);
                }
            },

            commitForm : function(fuck){
                if(typeof fuck!="object") return;
                if(fuck.applyStatus == 0){
                    var signData = {
                        //isJudge : true,
                        data : [{}],
                        pay_amount : fuck.action.pay
                    };

                    $("input[type='text']").each(function(index){
                        var mustBe = $(this).attr('data-necessary');
                        var now = $(this).val();
                        var bel = $(this).attr('data-label');
                        if(mustBe==1&&now==""){
                            Toast.show('请将报名信息填写完整!');
                            fuck.importError = 1;
                        }else{
                            signData.data[index] = {};
                            signData.data[index].title = bel;
                            signData.data[index].value = now;
                        }
                    });

                    if(fuck.importError==1) return;
                    var commitURI = $('form').attr('action'),
                        commitInfo = $('form').serialize();

                    $.post(commitURI, commitInfo, function(result){

                        if(result){
                            if(fuck.action.isNeedPay==1){
                                var maskHtml = template('template/mask', result);
                                $("[action='mask']").html(maskHtml);
                                $('[action="mask"]').show();
                            }
                        }
                        
                    })
                    .fail(function(){
                        Toast.show("sign up fail, please resubmit!");
                    });
                }else if(fuck.applyStatus == 1){
                    
                    if(fuck.action.isNeedPay==1){
                        var maskHtml = template('template/mask', fuck);
                        $("[action='mask']").html(maskHtml);
                        $('[action="mask"]').show();
                    }
                }
            },

            bindEvent : function(){
                // init ios bridge
                (function(){
                    function connectWebViewJavascriptBridge(callback) {
                        if (window.WebViewJavascriptBridge) {
                            callback(WebViewJavascriptBridge)
                        }else {
                            document.addEventListener('WebViewJavascriptBridgeReady', function() {
                                callback(WebViewJavascriptBridge)
                            }, false)
                        }
                    }
                    
                    if(window.iOSBridge) return;
                    
                    connectWebViewJavascriptBridge(function(iOSBridge) {
                        iOSBridge.init(function(message, responseCallback) {
                            responseCallback("")
                        })
                        window.iOSBridge=iOSBridge;
                    })
                }());

                var fuck = App.fuck;
                template.helper('PayInfoFormat', function(arg){
                    var id = arg.orderId;
                    var amount = arg.amount;
                    var info = [{count:1,name:fuck.action.payname}];

                    return JSON.stringify({
                        orderID:id,
                        info:info,
                        amount:amount
                    });
                });

                template.helper('dataFormat', function(t){
                    var locale = new Date(t).toLocaleDateString();
                    var array = locale.split('/');
                    array[1] = array[1]<10 ? '0' + array[1].toString() : array[1];
                    array[2] = array[2]<10 ? '0' + array[2].toString() : array[2];
                    var time = array[0] + '年' + array[1] + '月' + array[2] + '日';
                    return time
                });

                $('body').on('click','[action]',function(e){
                    var action = $(this).attr('action')
                    if (action == 'sign-up'){

                        $('[action="#"]').trigger('click');
                    }
                    if (action == 'cancel') {
                        $('[action="mask"]').hide();
                    }
                    if (action == "commit"){
                        App.commitForm(fuck);
                        return false;
                    }
                    if (action == "pay") {
                        var data = $('[action="pay"]').attr('data-pay');
                        App.pay(data);
                    }
                });

            },

            init : function(){
                this.getData();
                //this.bindEvent();
                //this.renderPage();
            }
        };
        App.init();
    </script>
</body>
</html>